import React, { useState, useEffect } from 'react'
import './message.scss'
import Head from '../../components/head'
import api from '../../util/api'
import { useNavigate } from 'react-router-dom';

export default function Message() {
    const [user, setUser] = useState(null);
    const [friend, setFriend] = useState([]);
    const navigate = useNavigate()

    useEffect(() => {
        const userInfo = JSON.parse(localStorage.getItem('user'));
        if (userInfo) {
            setUser(userInfo);
            getFriend(userInfo.note._id);
        }
    }, []);

    const getFriend = (myid: any) => {
        api.post('/cwp/getfriend', { myid: myid }).then(res => {
            setFriend(res); // 假设 res 是一个对象，其中的数据存储在 data 字段中
        });
    }
    const goWeb = (item: any) => {
        navigate('/web', { state: item })
    }
    return (
        <div className='message-wrapper'>
            <Head />
            <div className='message-all'>
                <div className='message-bq'>
                    <h2>所有消息</h2>
                </div>
                <div className='message-search'>
                    <i className="iconfont icon-sousuo"></i>
                    <input type="text" placeholder='这里搜索' />
                </div>
                <div className='message-list'>
                    {friend.map((item: any) => {
                        return (
                            <div className='userslist' key={item._id} onClick={() => goWeb(item)}>
                                <div className='user-img'>
                                    <img src={item.friendavatar} alt="" />
                                </div>
                                <div className='user-name'>
                                    <p>{item.friendname}</p>
                                </div>
                            </div>
                        )
                    })}
                </div>
                {/* <div className='message-list'>
                    <div className='userslist'>
                        <div className='user-img'>
                            <img src="1.png" alt="" />
                        </div>
                        <div className='user-name'>
                            <p>王鸿权</p>
                        </div>
                    </div>
                    <div className='userslist'>
                        <div className='user-img'>
                            <img src="1.png" alt="" />
                        </div>
                        <div className='user-name'>
                            <p>王鸿权</p>
                        </div>
                    </div>
                </div> */}
            </div>
        </div>
    )
}
